<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">用户登录</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-text-field
                  v-model="model.username"
                  label="用户名*"
                  required
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  v-model="model.password"
                  label="密码*"
                  :type="show1 ? 'text' : 'password'"
                  @click:append="show1 = !show1"
                  :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
                  required
                ></v-text-field>
              </v-col>
            </v-row>
          </v-container>
          <small>*必填项</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="close">关闭</v-btn>
          <v-btn color="blue darken-1" text @click="login">登录</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>
<script>
export default {
  data: () => ({
    dialog: true,
    show1: false,
    model: {
      username: "陈昀昊",
      password: "12345678"
    }
  }),
  methods: {
    close() {
      this.$emit("close", false);
    },
    async login() {
      console.log(this.model);
      const res = await this.$http.post("login/", this.model);
      console.log(res.data);
      if (res.data.error_num === 0) {
        localStorage.setItem("name", this.model.username);
        localStorage.token = res.data.token;
        this.$emit("login", true);
      }
      this.$emit("close", false);
    }
  }
};
</script>
